<!DOCTYPE html>
<!--suppress ALL-->
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="description" content="seo">
    <meta name="keywords" content="keywords">
    <meta name="author" content="jiangtao">

    <title>首页</title>
    <link th:href="@{/favicon.png}" type="image/x-icon" rel="shortcut icon">
    <link th:href="@{/static/assets/bootstrap/css/bootstrap.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/static/assets/swiper/css/swiper.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/static/assets/bootstrap-datepicker/css/bootstrap-datepicker3.min.css}" rel="stylesheet">

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=UZjDN7zy6Px270cQYu2FHxUtooOL8H8L"></script>

    <script>
        var ctx = "[[@{/}]]";
    </script>
    <style>
        .container {
            padding: 0 !important;
        }

        .my-part > .my-card > .card-title {
            font-size: 18px;
            font-weight: bold;
            text-align: center;
            color: #5776df;
        }

        .part-1 .rk-data {
            margin: 15px auto 0 auto;
            text-align: center;
        }
        .ui-tags span {
            display: inline-block;
        }
        .ui-tags > span {
            font-size: 14px;
            border: 1px solid #5776df;
        }
        .ui-tags > span > span {
            padding: 2px 4px;
            text-align: center;
            width: 48px;
        }
        .ui-tags > span > span:first-child {
            width: 70px;
            color: #fff;
            background-color: #5776df;
        }

        .part-2 {
            border-left: 1px solid #ddd;
            border-right: 1px solid #ddd;
        }
        #myMap {
            height: 540px;
            border: 1px solid #ddd;
        }

        .part-3 .ylfw .glyphicon {
            top: 3px;
        }

        .my-block {
        }
        .my-block .block-title label {
            letter-spacing: 2px;
        }
        .my-block.block-1 {
            margin-top: 30px;
        }
        .my-block .block-title {
            font-size: 16px;
            color: #5776df;
        }
        .my-block .block-detail {
            padding: 0 0 20px 0;
            /*background-color:#f9f9f9;*/
        }

        .block-1 .slide-item {
            padding-right: 10px;
            padding-top: 15px;
            vertical-align: center;
        }
        .block-1 .swiper-container-vertical > .swiper-pagination-bullets {
            right: 0;
        }
        .my-block .ui-tags > span {
            margin-top: 5px;
        }
        .my-block .ui-tags > span > span {
            width: 80px;
        }
        .my-block .ui-tags > span > span:first-child {
            width: 100px;
            color: #fff;
            background-color: #5776df;
        }

    </style>

</head>
<body>
<a href="#top"></a>
<div class="wrapper">
    <div class="header">
        <div class="container">
            <img th:src="@{/static/images/banner.png}" style="max-width: 1200px; width: 100%;">
        </div>
    </div>

    <div class="main" style="margin-top: 50px;">
        <div class="container">
            <div class="row">
                <div class="col-md-4 col-sm-4 my-part part-1">
                    <div class="my-card">
                        <div class="card-title">人口信息</div>
                        <div class="card-body">
                            <div id="p1" class="rk-data ui-tags">
                                <span><span>全镇人口</span><span>42000</span></span>
                                <span><span>老年人口</span><span>12000</span></span>
                                <span><span>老人占比</span><span>25%</span></span>
                            </div>
                            <div id="p2" class="rk-data ui-tags" style="display: none;">
                                <span><span style="color: #333;">常驻人口</span><span style="color: #f00;">56000</span></span>
                                <span><span style="color: #333;">老年人口</span><span style="color: #f00;">17000</span></span>
                                <span><span style="color: #333;">老人占比</span><span style="color: #f00;">28%</span></span>
                            </div>

                            <div id="chart11" style="height: 200px; margin-top: 30px;"></div>
                        </div>
                    </div>
                    <div class="my-card" style="margin-top: 20px;">
                        <div class="card-title">年龄分布</div>
                        <div class="card-body">
                            <div id="chart12" style="height: 300px"></div>
                        </div>
                    </div>

                    <div class="my-card" style="margin-top: 20px;">
                        <div class="card-title">重点人群</div>
                        <div class="card-body">
                            <div id="chart13" style="height: 300px"></div>
                        </div>
                    </div>
                </div>

                <div class="col-md-4 col-sm-4 my-part part-2">
                    <div class="my-card">
                        <div class="card-title">养老设施</div>
                        <div class="card-body">
                            <div id="chart21" style="height: 300px"></div>
                        </div>
                    </div>
                    <div class="my-card" style="margin-top: 50px;">
                        <div class="card-title">养老地图</div>
                        <div class="card-body" style="margin-top: 30px;">
                            <div id="myMap"></div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-sm-4 my-part part-3">
                    <div class="my-card">
                        <div class="card-title ylfw">
                            养老服务 <span id="nyBtn" class="glyphicon glyphicon-calendar"></span>
                            <input type="hidden" id="ny">
                        </div>
                        <div class="card-body">
                            <div class="my-block block-1">
                                <div class="block-title">
                                    <label>
                                        <span class="glyphicon glyphicon-play"></span> 养老方式
                                    </label>
                                </div>
                                <div class="block-detail ">
                                    <div class="ui-tags">
                                        <span><span>顾问点</span><span>13个</span></span>
                                        <span><span>养老顾问</span><span>54人</span></span>
                                    </div>
                                    <div style="border: 1px solid #ddd; padding: 10px; margin-top: 30px;">
                                        <div class="swiper-container" id="record" style="width: 100%; height: 180px;">
                                            <div class="swiper-wrapper">
                                                <div class="swiper-slide slide-item">
                                                    <div class="ask">
                                                        <span style="display: inline-block; font-size: 16px;"><b>王明明 - 西街居委会</b></span>
                                                        <span style="display: inline-block; font-size: 16px;">请问一下，西街居委会的顾问点在什么地方？</span>
                                                        <a style="display: block; font-size: 16px;" href="">回复</a>
                                                    </div>
                                                </div>
                                                <div class="swiper-slide slide-item">
                                                    <div class="ask">
                                                        <span style="display: inline-block; font-size: 16px;"><b>王明明 - 西街居委会</b></span>
                                                        <span style="display: inline-block; font-size: 16px;">请问一下，西街居委会的顾问点在什么地方？</span>
                                                        <a style="display: block; font-size: 16px;" href="">回复</a>
                                                    </div>
                                                </div>
                                                <div class="swiper-slide slide-item">
                                                    <div class="ask">
                                                        <span style="display: inline-block; font-size: 16px;"><b>王明明 - 西街居委会</b></span>
                                                        <span style="display: inline-block; font-size: 16px;">请问一下，西街居委会的顾问点在什么地方？</span>
                                                        <a style="display: block; font-size: 16px;" href="">回复</a>
                                                    </div>
                                                </div>
                                                <div class="swiper-slide slide-item">
                                                    <div class="ask">
                                                        <span style="display: inline-block; font-size: 16px;"><b>王明明 - 西街居委会</b></span>
                                                        <span style="display: inline-block; font-size: 16px;">请问一下，西街居委会的顾问点在什么地方？</span>
                                                        <a style="display: block; font-size: 16px;" href="">回复</a>
                                                    </div>
                                                </div>
                                                <div class="swiper-slide slide-item">
                                                    <div class="ask">
                                                        <span style="display: inline-block; font-size: 16px;"><b>王明明 - 西街居委会</b></span>
                                                        <span style="display: inline-block; font-size: 16px;">请问一下，西街居委会的顾问点在什么地方？</span>
                                                        <a style="display: block; font-size: 16px;" href="">回复</a>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="swiper-pagination record-pagination"></div>

                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="my-block block-2">
                                <div class="block-title">
                                    <label>
                                        <span class="glyphicon glyphicon-play"></span> 长护险
                                    </label>
                                </div>
                                <div class="block-detail ">
                                    <div class="ui-tags">
                                        <span><span>受理总量</span><span>2130人</span></span>
                                        <span><span>审核通过</span><span>2130人</span></span>
                                        <span><span>审核未通过</span><span>2130人</span></span>
                                        <span><span>待审核</span><span>2130人</span></span>
                                    </div>
                                    <div id="chart31" style="height: 250px"></div>
                                </div>
                            </div>
                            <div class="my-block block-3">
                                <div class="block-title">
                                    <label>
                                        <span class="glyphicon glyphicon-play"></span> 老年综合津贴
                                    </label>
                                </div>
                                <div class="block-detail ">
                                    <div class="ui-tags">
                                        <span><span>养老机构照护</span><span>2130人</span></span>
                                        <span><span>社区居家照护</span><span>2130人</span></span>
                                        <span><span>住院医疗照护</span><span>2130人</span></span>
                                    </div>
                                </div>
                            </div>
                            <div class="my-block block-4">
                                <div class="block-title">
                                    <label>
                                        <span class="glyphicon glyphicon-play"></span> 家庭医生
                                    </label>
                                </div>
                                <div class="block-detail ">
                                    <div class="ui-tags">
                                        <span><span>签约总人数</span><span>2130人</span></span>
                                    </div>
                                </div>
                            </div>
                            <div class="my-block block-5">
                                <div class="block-title">
                                    <label>
                                        <span class="glyphicon glyphicon-play"></span> 康乐福
                                    </label>
                                </div>
                                <div class="block-detail ">
                                    <div class="ui-tags">
                                        <span><span>服务人数</span><span>21305人次</span></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
        <div style="height: 50px;"></div>
    </div>
</div>

<div class="modal fade" id="vendorTableModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">养老设施<span id="vName"></span></h4>
            </div>
            <div class="modal-body">
                <table class="table table-bordered table-hover table-responsive">
                    <thead>
                    <tr>
                        <th>序号</th>
                        <th>名称</th>
                        <th>类别</th>
                        <th>地址</th>
                        <th>服务人数</th>
                    </tr>
                    </thead>
                    <tbody id="tbody">
                    <tr>
                        <td colspan="5" align="center">暂无数据</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/static/js/jquery.min.js}"></script>
<script th:src="@{/static/assets/bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{/static/assets/bootstrap-datepicker/js/bootstrap-datepicker.min.js}"></script>
<script th:src="@{/static/assets/bootstrap-datepicker/js/bootstrap-datepicker.zh-CN.min.js}"></script>
<script th:src="@{/static/assets/swiper/js/swiper.min.js}"></script>

<script th:src="@{/static/assets/echarts/echarts.js}"></script>
<script th:src="@{/static/js/index.js}"></script>

<script>
    var tTimer = null;
    tTimer = setTimeout(timeFunc, 1000);
    function timeFunc() {
        var now = new Date().getTime();
        if (now % 6 == 0 || now % 6 == 1 || now % 6 == 2) {
            $('#p1').show();
            $('#p2').hide();
        } else {
            $('#p2').show();
            $('#p1').hide();
        }
        clearTimeout(tTimer);
        tTimer = setTimeout(timeFunc, 1000);
    }
</script>
<script>
    $(function () {
        chart11();
        chart12();
        chart13();
        chart21();
        chart31();
        $('#nyBtn').datepicker({
            minViewMode: 1,
            maxViewMode: 2,
            language: "zh-CN",
            orientation: "bottom right",
            format: 'yyyy-mm',
            autoclose: true
        });
    });


    let mySwiper = new Swiper('#record', {
        autoplay: true,
        loop: true,
        direction : 'vertical',
        slidesPerView: 2,
        pagination: {
            el: '.swiper-pagination',
        },
    })
</script>
<script>
    //奉贤区政府坐标23.2912698943,
    var latitude = 121.376687;
    var longitude = 31.127438;
    var markerArr = new Array();

    //创建和初始化地图函数：
    function initMap() {
        createMap();//创建地图
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件
    }

    //创建地图函数：
    function createMap() {
        var map = new BMap.Map("myMap");//在百度地图容器中创建一个地图
        var point = new BMap.Point(121.376687, 31.127438);//定义一个中心点坐标
        map.centerAndZoom(point, 16);//设定地图的中心点和坐标并将地图显示在地图容器中
        window.map = map;//将map变量存储在全局

        //从后台获取供应商数据
        getVendorData();
    }

    //地图事件设置函数：
    function setMapEvent() {
        map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
        map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
        map.enableKeyboard();//启用键盘上下左右键移动地图
    }

    //地图控件添加函数：
    function addMapControl() {
        //向地图中添加缩放控件
        var ctrl_nav = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE});
        map.addControl(ctrl_nav);
        //向地图中添加缩略图控件
        var ctrl_ove = new BMap.OverviewMapControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1});
        map.addControl(ctrl_ove);
        //向地图中添加比例尺控件
        var ctrl_sca = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT});
        map.addControl(ctrl_sca);

        //map.setDefaultCursor("crosshair");
    }

    function addMarker() {
        for (var i = 0; i < markerArr.length; i++) {
            var json = markerArr[i];
            var p0 = json.point.split("|")[0];
            var p1 = json.point.split("|")[1];
            var point = new BMap.Point(p0, p1);
            var iconImg = createIcon(json);
            var marker = new BMap.Marker(point, {title: json.title, icon: iconImg, enableClicking: true});  // 创建标注

            //map.removeOverlay(preMarker);
            map.addOverlay(marker); // 将标注添加到地图中
            addClickHandler(i, marker);
        }

    }

    function addClickHandler(i, marker) {
        marker.addEventListener("click", function (e) {
            openInfo(i, e);
        });
    }

    function openInfo(i, e) {
        var json = markerArr[i];
        var p = e.target;
        var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
        var html = "";
        html += "<div style='font-size:20px;height:36px;line-height:36px;font-weight:bold;'>" + json.vendor_name + "</div>";
        html += "<div style='font-size:16px;padding:4px 0;'>详细地址：" + json.address + "</div>";
        html += "<div style='font-size:16px;padding:4px 0;'>联系电话：" + json.phone + "</div>";
        html += "<div style='font-size:16px;height:28px;line-height:28px;'>联系人：" + json.contacts + "</div>";
        html += "<div style='font-size:16px;padding:4px 0;'>查看详情：<a target='_blank' href='index.php?r=vendor/view&id=" + json.id + "'>点击进入</a></div>";


        var infoWindow = new BMap.InfoWindow(html);  // 创建信息窗口对象
        infoWindow.setWidth(450);
        map.openInfoWindow(infoWindow, point); //开启信息窗口
    }

    //创建一个Icon
    function createIcon(info) {
        var json = info.icon;
        var icon = new BMap.Icon(
            info.image,
            new BMap.Size(32, 32),
            {
                imageOffset: new BMap.Size(0, 0),
                anchor: new BMap.Size(16, 16)
            });
        return icon;
    }

    function getVendorData() {
        var street_name = $.trim($("#street_name").val());
        var type = $.trim($("#vendor_type").val());
        var type3 = $.trim($("#vendor_type2").val());

        $.ajax({
            url: '',
            data: {vendor_type: type, street_name: street_name, type3: type3},
            type: 'post',
            dataType: 'json',
            async: true,
            success: function (data) {
                //修改供应商名称列表
                var html = '<option value=""></option>';
                if (type == 0)
                    html = '<option value="" selected>全部养老服务机构/组织</option>';
                var rs = data.names;
                for (var i = 1; i < rs.length; i++) {
                    html += '<option value="' + rs[i].code + '">' + rs[i].name + '</option>';
                }
                $("#vendor_name").html(html);

                markerArr = data.markerArr;
                addMarker();//向地图中添加marker
            }
        });
    }

    initMap();

</script>
</body>
</html>